<!DOCTYPE html>
<html>
<head>
	<title>画布模板</title>
	<style type="text/css">
		*{padding:0px;margin:0px;}
		.canvasbox{margin:100px auto;width: 500px;}
		#mycanvas{background:blue;}
	</style>
</head>
<body>
	<div class="canvasbox">
		<canvas id="mycanvas" width="500px" height="500px"></canvas>
	</div>
	<script type="text/javascript" src="modernizr-custom.js"></script>
	<script type="text/javascript">
		window.addEventListener("load",eventWindowLoaded,false);
		function eventWindowLoaded(){
			canvasApp()
		}
		function canvasSupport(){
			return Modernizr.canvas;
		}
		function canvasApp(){
				if(!canvasSupport()){
					return false;
				}else{
					var canvas = document.getElementById("mycanvas");
		 			var context = canvas.getContext("2d");
				}
				
		 				
		 		function drawScreen(){
		 			context.fillStyle = "black";
		 			context.fillRect(10,10,200,200);
		 			context.save();
		 			context.beginPath();
		 			context.rect(0,0,50,50);
		 			context.clip();
		 			context.beginPath();
		 			context.strokeStyle = "red";
		 			context.lineWidth = 5;
		 			context.arc(100,100,100,(Math.PI/180)*0,(Math.PI/180)*360,false);
		 			context.stroke();
		 			context.closePath();
		 			context.restore();
		 			context.beginPath();
		 			context.rect(0,0,500,500);
		 			context.clip();
		 			context.beginPath();
		 			context.strokeStyle = "blue";
		 			context.lineWidth=5;
		 			context.arc(100,100,50,(Math.PI/180)*0,(Math.PI/180)*360,false);
		 			context.stroke();
		 			context.closePath();
				}

						

				// 动画函数		
				function gameLoop(){
					window.setTimeout(gameLoop,500);
					drawScreen()

				}
				gameLoop()
			
		}

		 
		

		
	</script>
</body>
</html>